<template>
  <div class="vue-eslint clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">esLint在vsCode中的使用</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            安装插件<br>
            eslint<br>
            vetur<br>
            修改首选项配置setting.json<br>
            {<br>
              &nbsp;&nbsp;"editor.formatOnSave": false,<br>
              &nbsp;&nbsp;"eslint.autoFixOnSave": true,<br>
              &nbsp;&nbsp;"eslint.validate": [<br>
                &nbsp;&nbsp;&nbsp;&nbsp;"javascript",{<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"language": "vue",<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"autoFix": true<br>
                &nbsp;&nbsp;&nbsp;&nbsp;},<br>
                &nbsp;&nbsp;"html",<br>
                &nbsp;&nbsp;"vue"<br>
              &nbsp;&nbsp;]<br>
            }
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">关闭某块代码的检验</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            /* eslint-disable */<br>
            alert('foo');<br>
            /* eslint-enable */
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">关闭代码块某些规则的检验</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            /* eslint-disable no-alert, no-console */<br>
            alert('foo');<br>
            console.log('bar');<br>
            /* eslint-enable no-alert, no-console */
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">关闭对某行代码的检验</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            alert('foo'); // eslint-disable-line<br>
            // 或者<br>
            // eslint-disable-next-line<br>
            alert('foo');
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">彻底关闭对某个文件的检验</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            /* eslint-disable */<br>
            alert('foo');
          </code>
        </div>
      </el-card>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'VueEslint'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-eslint{
  margin: 0 auto;
  overflow: hidden;
  .main{
    column-count: 2;
    column-gap:10px;
    padding: 10px;
  }
  .el-card{
    margin: 10px 0;
  }
  .el-card__header{
    padding: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    line-height: 30px;
  }
}
</style>
